﻿<!DOCTYPE HTML>
<html lang="zyc">

<head>
    <title>登录</title>
    <!-- Meta tag Keywords -->
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta charset="UTF-8" />
    <meta name="keywords" content="" />
    <script>
        addEventListener("load", function () {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <style>
        /* reset */

        html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, dl, dt, dd, ol, nav ul, nav li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
            margin: 0;
            padding: 0;
            border: 0;
            font-size: 100%;
            font: inherit;
            vertical-align: baseline;
        }

        article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
            display: block;
        }

        ol, ul {
            list-style: none;
            margin: 0px;
            padding: 0px;
        }

        blockquote, q {
            quotes: none;
        }

            blockquote:before, blockquote:after, q:before, q:after {
                content: '';
                content: none;
            }

        table {
            border-collapse: collapse;
            border-spacing: 0;
        }
        /* start editing from here */

        a {
            text-decoration: none;
        }

        .txt-rt {
            text-align: right;
        }
        /* text align right */

        .txt-lt {
            text-align: left;
        }
        /* text align left */

        .txt-center {
            text-align: center;
        }
        /* text align center */

        .float-rt {
            float: right;
        }
        /* float right */

        .float-lt {
            float: left;
        }
        /* float left */

        .clear {
            clear: both;
        }
        /* clear float */

        .pos-relative {
            position: relative;
        }
        /* Position Relative */

        .pos-absolute {
            position: absolute;
        }
        /* Position Absolute */

        .vertical-base {
            vertical-align: baseline;
        }
        /* vertical align baseline */

        .vertical-top {
            vertical-align: top;
        }
        /* vertical align top */

        nav.vertical ul li {
            display: block;
        }
        /* vertical menu */

        nav.horizontal ul li {
            display: inline-block;
        }
        /* horizontal menu */

        img {
            max-width: 100%;
        }
        /*end reset*/
        html {
            background-color: #2196F3;
            background-size: cover;
            height: 100vh;
        }

        body {
            font-family: 'Open Sans', sans-serif;
            font-size: 100%;
            /*background: #2196F3;*/
        }
        /*--header--*/
        h1 {
            font-size: 3.5em;
            color: #fff;
            letter-spacing: 3px;
            text-align: center;
            margin: 3vw 1vw;
            font-weight: bold;
            font-family: 'Josefin Sans', sans-serif;
        }

            h1 span, h2 i {
                color: #f7296f;
            }

        h2 {
            color: #fff;
            font-size: 22px;
            font-weight: 500;
            letter-spacing: 1px;
            text-transform: capitalize;
            margin-bottom: 1em;
        }
        /*--//header--*/

        /*-- content --*/

        .sub-main-w3 {
            display: -webkit-flex;
            display: -webkit-box;
            display: -moz-flex;
            display: -moz-box;
            display: -ms-flexbox;
            display: flex;
            align-items: center;
            -webkit-box-pack: center;
            -moz-box-pack: center;
            -ms-flex-pack: center;
            -webkit-justify-content: center;
            justify-content: center;
        }

            .sub-main-w3 form {
                max-width: 600px;
                margin: 0 5vw;
                background: rgba(10, 10, 10, 0.17);
                padding: 3.5vw;
                box-sizing: border-box;
                display: -webkit-flex;
                display: flex;
                flex-wrap: wrap;
                justify-content: center;
                border-bottom: 8px solid #f7296f;
                border-radius: 30px 30px 50px 50px;
            }

        .form-style-agile {
            margin-bottom: 1.5em;
            flex-basis: 100%;
            -webkit-flex-basis: 100%;
        }

        .sub-main-w3 label {
            font-size: 14px;
            color: #fff;
            display: inline-block;
            font-weight: 500;
            margin-bottom: 12px;
            text-transform: capitalize;
            letter-spacing: 1px;
        }

            .sub-main-w3 label i {
                font-size: 15px;
                margin-left: 5px;
                color: #f7296f;
                border-radius: 50%;
                line-height: 1.9;
                text-align: center;
            }

        .form-style-agile input[type="text"], .form-style-agile input[type="password"] {
            width: 100%;
            color: #000;
            outline: none;
            font-size: 14px;
            letter-spacing: 1px;
            padding: 15px 15px;
            box-sizing: border-box;
            border: none;
            border: 1px solid #000;
            background: #fff;
        }

        .submit {
            color: #fff;
            background: #f7296f;
            border: none;
            padding: 13px 0;
            margin-top: 30px;
            outline: none;
            width: 36%;
            font-size: 16px;
            cursor: pointer;
            letter-spacing: 2px;
            -webkit-transition: 0.5s all;
            -o-transition: 0.5s all;
            -moz-transition: 0.5s all;
            -ms-transition: 0.5s all;
            transition: 0.5s all;
            box-shadow: 2px 2px 6px rgba(0, 0, 0, 0.49);
        }

            .submit:hover {
                background: #000;
                -webkit-transition: 0.5s all;
                -o-transition: 0.5s all;
                -moz-transition: 0.5s all;
                -ms-transition: 0.5s all;
                transition: 0.5s all;
            }

        .wthree-text {
            width: 100%;
        }

            .wthree-text ul li:nth-child(1) {
                float: left;
            }

            .wthree-text ul li:nth-child(2) {
                float: right;
            }

            .wthree-text ul li {
                display: inline-block;
            }

                .wthree-text ul li a {
                    color: #fff;
                    font-size: 14px;
                    letter-spacing: 1px;
                    font-weight: 500;
                }
            /*-- checkbox --*/

            .wthree-text label {
                font-size: 15px;
                color: #fff;
                cursor: pointer;
                position: relative;
            }

        .wthree-text {
            text-align: center;
        }

        input.checkbox {
            background: #f7296f;
            cursor: pointer;
            width: 1.2em;
            height: 1.2em;
            vertical-align: text-bottom;
        }

            input.checkbox:before {
                content: "";
                position: absolute;
                width: 1.2em;
                height: 1.2em;
                background: inherit;
                cursor: pointer;
            }

            input.checkbox:after {
                content: "";
                position: absolute;
                top: 4px;
                left: 4px;
                z-index: 1;
                width: 1em;
                height: 1em;
                border: 1px solid #fff;
                -webkit-transition: .4s ease-in-out;
                -moz-transition: .4s ease-in-out;
                -o-transition: .4s ease-in-out;
                transition: .4s ease-in-out;
            }

            input.checkbox:checked:after {
                -webkit-transform: rotate(-45deg);
                -moz-transform: rotate(-45deg);
                -o-transform: rotate(-45deg);
                -ms-transform: rotate(-45deg);
                transform: rotate(-45deg);
                height: .5rem;
                border-color: #fff;
                border-top-color: transparent;
                border-right-color: transparent;
            }

        .anim input.checkbox:checked:after {
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
            height: .5rem;
            border-color: transparent;
            border-right-color: transparent;
            animation: .4s rippling .4s ease;
            animation-fill-mode: forwards;
        }

        @@keyframes rippling {
            50% {
                border-left-color: #fff;
            }

            100% {
                border-bottom-color: #fff;
                border-left-color: #fff;
            }
        }

        /*-- //checkbox --*/

        /*--placeholder-color--*/

        ::-webkit-input-placeholder {
            color: #000;
            opacity: .5
        }

        :-moz-placeholder {
            /* Firefox 18- */
            color: #000;
            opacity: .5
        }

        ::-moz-placeholder {
            /* Firefox 19+ */
            color: #000;
            opacity: .5
        }

        :-ms-input-placeholder {
            color: #000;
        }
        /*-- //placeholder-color --*/

        /*-- //content --*/

        /*-- copyright --*/

        .footer {
            margin: 4vw .3vw 2vw;
        }

            .footer p {
                font-size: 14px;
                color: #fff;
                letter-spacing: 2px;
                text-align: center;
                line-height: 1.8;
            }

                .footer p a {
                    color: #fff;
                    -webkit-transition: 0.5s all;
                    -o-transition: 0.5s all;
                    -moz-transition: 0.5s all;
                    -ms-transition: 0.5s all;
                    transition: 0.5s all;
                }

                    .footer p a:hover {
                        color: #f7296f;
                        -webkit-transition: 0.5s all;
                        -o-transition: 0.5s all;
                        -moz-transition: 0.5s all;
                        -ms-transition: 0.5s all;
                        transition: 0.5s all;
                    }
        /*-- //copyright --*/

        /*-- bg effect --*/

        #bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
        }

            #bg canvas {
                position: absolute;
                top: 0;
                left: 0;
                width: 100%;
                height: 100%;
            }

        /*-- //bg effect --*/

        /*--responsive--*/

        @@media(max-width:1920px) {
            h1 {
                font-size: 3.5vw;
            }
        }

        @@media(max-width:1024px) {
            h1 {
                font-size: 4.5vw;
            }
        }

        @@media(max-width:800px) {
            h1 {
                font-size: 2.6em;
            }
        }

        @@media(max-width:480px) {
            h1 {
                font-size: 2.3em;
                letter-spacing: 1px;
            }

            .sub-main-w3 form {
                padding: 7.5vw;
            }

            .footer p {
                letter-spacing: 1px;
            }
        }

        @@media(max-width:414px) {
            .form-style-agile input[type="text"], .form-style-agile input[type="password"] {
                font-size: 13px;
                padding: 13px 15px;
            }

            .wthree-text ul li:nth-child(1), .wthree-text ul li:nth-child(2) {
                float: none;
            }

            .wthree-text ul li:nth-child(2) {
                margin-top: 10px;
            }

            .sub-main-w3 input[type="submit"] {
                width: 56%;
            }

            .wthree-text ul li {
                display: block;
            }
        }

        @@media(max-width:320px) {
            h1 {
                font-size: 1.8em;
                margin: 5vw 1vw;
            }

            .sub-main-w3 form {
                padding: 25px 14px;
            }
        }

        /*--//responsive--*/

    </style>
</head>

<body>
    <!-- bg effect -->
    <div id="bg">
        <canvas></canvas>
        <canvas></canvas>
        <canvas></canvas>
    </div>
    <!-- //bg effect -->
    <!-- title -->
    <h1>后台管理系统</h1>
    <!-- //title -->
    <!-- content -->
    <div class="sub-main-w3">
        <form class="layui-form">
            <h2>
                请登录
            </h2>
            <div class="form-style-agile">
                <label>
                    Username
                </label>
                <input placeholder="用户名" autocomplete="off" name="username" lay-verify="required" type="text" value="" required="">
            </div>
            <div class="form-style-agile">
                <label>
                    Password
                </label>
                <input placeholder="密码" autocomplete="off" name="password" lay-verify="required" type="password" required="">
            </div>
            <!-- checkbox -->
            <div class="wthree-text">
                @Html.AntiForgeryToken()
            </div>
            <!-- //checkbox -->
            <button lay-submit lay-filter="login" class="submit">登录</button>
        </form>
    </div>
    <!-- //content -->
    <!-- Jquery -->
    <script src="~/admin/js/jquery.min.js"></script>
    <script src="~/admin/lib/layui/layui.js"></script>
    <script>
        $(function  () {
            layui.use('form', function(){
                var form = layui.form;

              //监听提交
                form.on('submit(login)', function (data) {
                    var load = layer.load(1);
                    console.log(data)
                    $.ajax({
					    url:'@Url.Content("/Admin/Login")',
					    type: 'POST',
					    data: data.field,
					    dataType: 'json',
					    async: true,
                        success: function (result, status, xhr) {
                            if (result.code != 200) {
                                layer.open({
                                    title: '提示'
                                    , content: result.result
                                });
                            } else {
                                layer.msg(result.result, function () {
                                   location.replace("/admin")
                                });
                            }
                        },
                        complete: function () {
                            layer.close(load);
                        }
				    });
                return false;
              });
            });
        })
    </script>
    <!-- //Jquery -->
    <!-- effect js -->
    <script>
        (function ($) {
            var canvas = $('#bg').children('canvas'),
                background = canvas[0],
                foreground1 = canvas[1],
                foreground2 = canvas[2],
                config = {
                    circle: {
                        amount: 18,
                        layer: 3,
                        color: [157, 97, 207],
                        alpha: 0.3
                    },
                    line: {
                        amount: 12,
                        layer: 3,
                        color: [255, 255, 255],
                        alpha: 0.3
                    },
                    speed: 0.5,
                    angle: 20
                };

            if (background.getContext) {
                var bctx = background.getContext('2d'),
                    fctx1 = foreground1.getContext('2d'),
                    fctx2 = foreground2.getContext('2d'),
                    M = window.Math, // Cached Math
                    degree = config.angle / 360 * M.PI * 2,
                    circles = [],
                    lines = [],
                    wWidth, wHeight, timer;

                requestAnimationFrame = window.requestAnimationFrame ||
                    window.mozRequestAnimationFrame ||
                    window.webkitRequestAnimationFrame ||
                    window.msRequestAnimationFrame ||
                    window.oRequestAnimationFrame ||
                    function (callback, element) { setTimeout(callback, 1000 / 60); };

                cancelAnimationFrame = window.cancelAnimationFrame ||
                    window.mozCancelAnimationFrame ||
                    window.webkitCancelAnimationFrame ||
                    window.msCancelAnimationFrame ||
                    window.oCancelAnimationFrame ||
                    clearTimeout;

                var setCanvasHeight = function () {
                    wWidth = $(window).width();
                    wHeight = $(window).height(),

                        canvas.each(function () {
                            this.width = wWidth;
                            this.height = wHeight;
                        });
                };

                var drawCircle = function (x, y, radius, color, alpha) {
                    var gradient = fctx1.createRadialGradient(x, y, radius, x, y, 0);
                    gradient.addColorStop(0, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + alpha + ')');
                    gradient.addColorStop(1, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (alpha - 0.1) + ')');

                    fctx1.beginPath();
                    fctx1.arc(x, y, radius, 0, M.PI * 2, true);
                    fctx1.fillStyle = gradient;
                    fctx1.fill();
                };

                var drawLine = function (x, y, width, color, alpha) {
                    var endX = x + M.sin(degree) * width,
                        endY = y - M.cos(degree) * width,
                        gradient = fctx2.createLinearGradient(x, y, endX, endY);
                    gradient.addColorStop(0, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + alpha + ')');
                    gradient.addColorStop(1, 'rgba(' + color[0] + ',' + color[1] + ',' + color[2] + ',' + (alpha - 0.1) + ')');

                    fctx2.beginPath();
                    fctx2.moveTo(x, y);
                    fctx2.lineTo(endX, endY);
                    fctx2.lineWidth = 3;
                    fctx2.lineCap = 'round';
                    fctx2.strokeStyle = gradient;
                    fctx2.stroke();
                };

                var drawBack = function () {
                    bctx.clearRect(0, 0, wWidth, wHeight);

                    var gradient = [];

                    gradient[0] = bctx.createRadialGradient(wWidth * 0.3, wHeight * 0.1, 0, wWidth * 0.3, wHeight * 0.1, wWidth * 0.9);
                    gradient[0].addColorStop(0, 'rgb(0, 26, 77)');
                    gradient[0].addColorStop(1, 'transparent');

                    bctx.translate(wWidth, 0);
                    bctx.scale(-1, 1);
                    bctx.beginPath();
                    bctx.fillStyle = gradient[0];
                    bctx.fillRect(0, 0, wWidth, wHeight);

                    gradient[1] = bctx.createRadialGradient(wWidth * 0.1, wHeight * 0.1, 0, wWidth * 0.3, wHeight * 0.1, wWidth);
                    gradient[1].addColorStop(0, 'rgb(0, 150, 240)');
                    gradient[1].addColorStop(0.8, 'transparent');

                    bctx.translate(wWidth, 0);
                    bctx.scale(-1, 1);
                    bctx.beginPath();
                    bctx.fillStyle = gradient[1];
                    bctx.fillRect(0, 0, wWidth, wHeight);

                    gradient[2] = bctx.createRadialGradient(wWidth * 0.1, wHeight * 0.5, 0, wWidth * 0.1, wHeight * 0.5, wWidth * 0.5);
                    gradient[2].addColorStop(0, 'rgb(40, 20, 105)');
                    gradient[2].addColorStop(1, 'transparent');

                    bctx.beginPath();
                    bctx.fillStyle = gradient[2];
                    bctx.fillRect(0, 0, wWidth, wHeight);
                };

                var animate = function () {
                    var sin = M.sin(degree),
                        cos = M.cos(degree);

                    if (config.circle.amount > 0 && config.circle.layer > 0) {
                        fctx1.clearRect(0, 0, wWidth, wHeight);
                        for (var i = 0, len = circles.length; i < len; i++) {
                            var item = circles[i],
                                x = item.x,
                                y = item.y,
                                radius = item.radius,
                                speed = item.speed;

                            if (x > wWidth + radius) {
                                x = -radius;
                            } else if (x < -radius) {
                                x = wWidth + radius
                            } else {
                                x += sin * speed;
                            }

                            if (y > wHeight + radius) {
                                y = -radius;
                            } else if (y < -radius) {
                                y = wHeight + radius;
                            } else {
                                y -= cos * speed;
                            }

                            item.x = x;
                            item.y = y;
                            drawCircle(x, y, radius, item.color, item.alpha);
                        }
                    }

                    if (config.line.amount > 0 && config.line.layer > 0) {
                        fctx2.clearRect(0, 0, wWidth, wHeight);
                        for (var j = 0, len = lines.length; j < len; j++) {
                            var item = lines[j],
                                x = item.x,
                                y = item.y,
                                width = item.width,
                                speed = item.speed;

                            if (x > wWidth + width * sin) {
                                x = -width * sin;
                            } else if (x < -width * sin) {
                                x = wWidth + width * sin;
                            } else {
                                x += sin * speed;
                            }

                            if (y > wHeight + width * cos) {
                                y = -width * cos;
                            } else if (y < -width * cos) {
                                y = wHeight + width * cos;
                            } else {
                                y -= cos * speed;
                            }

                            item.x = x;
                            item.y = y;
                            drawLine(x, y, width, item.color, item.alpha);
                        }
                    }

                    timer = requestAnimationFrame(animate);
                };

                var createItem = function () {
                    circles = [];
                    lines = [];

                    if (config.circle.amount > 0 && config.circle.layer > 0) {
                        for (var i = 0; i < config.circle.amount / config.circle.layer; i++) {
                            for (var j = 0; j < config.circle.layer; j++) {
                                circles.push({
                                    x: M.random() * wWidth,
                                    y: M.random() * wHeight,
                                    radius: M.random() * (20 + j * 5) + (20 + j * 5),
                                    color: config.circle.color,
                                    alpha: M.random() * 0.2 + (config.circle.alpha - j * 0.1),
                                    speed: config.speed * (1 + j * 0.5)
                                });
                            }
                        }
                    }

                    if (config.line.amount > 0 && config.line.layer > 0) {
                        for (var m = 0; m < config.line.amount / config.line.layer; m++) {
                            for (var n = 0; n < config.line.layer; n++) {
                                lines.push({
                                    x: M.random() * wWidth,
                                    y: M.random() * wHeight,
                                    width: M.random() * (20 + n * 5) + (20 + n * 5),
                                    color: config.line.color,
                                    alpha: M.random() * 0.2 + (config.line.alpha - n * 0.1),
                                    speed: config.speed * (1 + n * 0.5)
                                });
                            }
                        }
                    }

                    cancelAnimationFrame(timer);
                    timer = requestAnimationFrame(animate);
                    drawBack();
                };

                $(document).ready(function () {
                    setCanvasHeight();
                    createItem();
                });
                $(window).resize(function () {
                    setCanvasHeight();
                    createItem();
                });
            }
        })(jQuery);
    </script>
    <!-- //effect js -->

</body>

</html>